<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="ie"> <![endif]-->
<!--[if !IE]><!-->
<html dir="ltr" lang="en">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<title>The Project | Landing Page</title>
		<meta name="description" content="The Project a Bootstrap-based, Responsive HTML5 Template">
		<meta name="author" content="htmlcoder.me">

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

		<!-- Fontello CSS -->
		<link href="fonts/fontello/css/fontello.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
		<link href="css/animations.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.carousel.min.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.theme.default.min.css" rel="stylesheet">
		<link href="plugins/hover/hover-min.css" rel="stylesheet">		
		
		<!-- The Project's core CSS file -->
		<!-- Use css/rtl_style.css for RTL version -->
		<link href="css/style.css" rel="stylesheet" >
		<!-- The Project's Typography CSS file, includes used fonts -->
		<!-- Used font for body: Roboto -->
		<!-- Used font for headings: Raleway -->
		<!-- Use css/rtl_typography-default.css for RTL version -->
		<link href="css/typography-default.css" rel="stylesheet" >
		<!-- Color Scheme (In order to change the color scheme, replace the blue.css with the color scheme that you prefer)-->
		<link href="css/skins/light_blue.css" rel="stylesheet">
		

		<!-- Custom css --> 
		<link href="css/custom.css" rel="stylesheet">
	</head>

	<!-- body classes:  -->
	<!-- "boxed": boxed layout mode e.g. <body class="boxed"> -->
	<!-- "pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> -->
	<!-- "transparent-header": makes the header transparent and pulls the banner to top -->
	<!-- "gradient-background-header": applies gradient background to header -->
	<!-- "page-loader-1 ... page-loader-6": add a page loader to the page (more info @components-page-loaders.html) -->
	<body class="no-trans    ">

		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop circle"><i class="icon-up-open-big"></i></div>
		
		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">
		
			<!-- header-container start -->
			<div id="header" class="header-container">
				<!-- header start -->
				<!-- classes:  -->
				<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
				<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
				<!-- "full-width": mandatory class for the full-width menu layout -->
				<!-- "centered": mandatory class for the centered logo layout -->
				<!-- ================ --> 
				<header class="header pv-20  clearfix">
					<div class="container">
						<div class="row">
							<div class="col-sm-4">
								<!-- header-first start -->
								<!-- ================ -->
								<div class="header-first clearfix">

									<!-- logo -->
									<div id="logo" class="logo">
										<a href="index.html"><img id="logo_img" src="images/logo_light_blue.png" alt="The Project"></a>
									</div>

									<!-- name-and-slogan -->
									<div class="site-slogan">
										Multipurpose HTML5 Template
									</div>
									
								</div>
								<!-- header-first end -->
							</div>
							<div class="col-sm-8">
								<ul class="social-links text-right text-center-xs animated-effect-1 circle small clearfix">
									<li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
									<li class="skype"><a target="_blank" href="http://www.skype.com"><i class="fa fa-skype"></i></a></li>
									<li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
									<li class="googleplus"><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
									<li class="youtube"><a target="_blank" href="http://www.youtube.com"><i class="fa fa-youtube-play"></i></a></li>
									<li class="flickr"><a target="_blank" href="http://www.flickr.com"><i class="fa fa-flickr"></i></a></li>
									<li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
									<li class="pinterest"><a target="_blank" href="http://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
				</header>
				<!-- header end -->
			</div>
			<!-- header-container end -->
		
			<!-- banner start -->
			<!-- ================ -->
			<div id="banner" class="banner dark-translucent-bg padding-bottom-clear" style="background-image:url('images/landing-page-banner.jpg');">
				<!-- section start -->
				<!-- ================ -->
				<div class="container">
					<div class="row">
						<div class="col-md-8 text-center col-md-offset-2 space-bottom">
							<div class="title large_white">The Project</div>
							<div class="separator"></div>
							<p class="text-center lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi perferendis magnam ea necessitatibus, officiis voluptas odit!</p>
						</div>
					</div>
					<div class="row mb-20">
						<div class="col-md-4">
							<div class="feature-box-2 object-non-visible" data-animation-effect="fadeInDownSmall" data-effect-delay="100">
								<span class="icon default-bg small"><i class="fa fa-heart-o"></i></span>
								<div class="body">
									<h4 class="title">Clean Code &amp; Design</h4>
									<p>Voluptatem ad provident non repudiandae beatae cupiditate amet reiciendis lorem dolor consectetur.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="feature-box-2 object-non-visible" data-animation-effect="fadeInDownSmall" data-effect-delay="150">
								<span class="icon default-bg small"><i class="fa fa-connectdevelop"></i></span>
								<div class="body">
									<h4 class="title">Extremely Flexible</h4>
									<p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritatis cumque lorem ipsum dolor sit amet, consectetur.</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="feature-box-2 object-non-visible" data-animation-effect="fadeInDownSmall" data-effect-delay="200">
								<span class="icon default-bg small"><i class="icon-snow"></i></span>
								<div class="body">
									<h4 class="title">Latest Technologies</h4>
									<p>Inventore dolores aut laboriosam cum consequuntur delectus sequi lorem ipsum dolor sit amet, consectetur.</p>
								</div>
							</div>
						</div>
					</div>					
				</div>
				<!-- section end -->
				<!-- section start -->
				<!-- ================ -->
				<div class="pv-40 dark-translucent-bg">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="call-to-action text-center">
									<form class="form-inline margin-clear">
										<div class="form-group has-feedback">
											<label class="sr-only" for="subscribe3">Email address</label>
											<input type="email" class="form-control form-control-lg" id="subscribe3" placeholder="Enter email" name="subscribe3" required="">
											<i class="fa fa-envelope form-control-feedback"></i>
										</div>
										<button type="submit" class="btn btn-lg btn-gray-transparent btn-animated margin-clear">Subscribe <i class="fa fa-send"></i></button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- section end -->
			</div>
			<!-- banner end -->

			<!-- main-container start -->
			<!-- ================ -->
			<section class="main-container">

				<div class="container">
					<div class="row">

						<!-- main start -->
						<!-- ================ -->
						<div class="main col-md-12">
							<div class="row">
								<div class="col-md-6">
									<img src="images/section-image-1.png" alt="">		
								</div>
								<div class="col-md-6">
									<h2>We Are Offer Amazing Services</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa facere possimus, inventore ipsam at autem! Necessitatibus aliquam qui itaque quasi, laborum fugit? Eos minima quasi aperiam, incidunt dolores aliquid neque!</p>
									<div class="media">
										<div class="media-left pr-20">
											<a href="#">
												<span class="icon circle small default-bg"><i class="icon-eye"></i> </span>
											</a>
										</div>
										<div class="media-body">
											<h4 class="media-heading">Extremely Flexible</h4>
											Cras sit amet nibh libero, in gravida nulla. Sollicitudin.
										</div>
									</div>
									<div class="media">
										<div class="media-left pr-20">
											<a href="#">
												<span class="icon circle small default-bg"><i class="icon-trophy"></i> </span>
											</a>
										</div>
										<div class="media-body">
											<h4 class="media-heading">Packed Full Of Features</h4>
											Cras sit amet nibh libero. Nulla vel metus scelerisque.
										</div>
									</div>
									<div class="media">
										<div class="media-left pr-20">
											<a href="#">
												<span class="icon circle small default-bg"><i class="icon-lifebuoy"></i> </span>
											</a>
										</div>
										<div class="media-body">
											<h4 class="media-heading">24/7 Support</h4>
											Cras sit amet nibh libero. Nulla vel metus scelerisque.
										</div>
									</div>
									<a href="#" class="btn btn-lg btn-default btn-animated">Purchase <i class="fa fa-cart-arrow-down pl-20"></i></a>
								</div>
							</div>
							<hr>
							<div class="row">
								<div class="col-md-6 col-md-push-6">
									<img class="pv-30" src="images/section-image-2.png" alt="">		
								</div>
								<div class="col-md-6 col-md-pull-6">
									<h2>You Will Love It!</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa facere possimus, inventore ipsam at autem! Necessitatibus aliquam qui itaque quasi, laborum fugit? Eos minima quasi aperiam, incidunt dolores aliquid neque!</p>
									<ul class="list-icons">
										<li><i class="icon-check-1"></i> Extremly Simple to Use</li>
										<li><i class="icon-check-1"></i> Customize it in no time</li>
										<li><i class="icon-check-1"></i> Unlimited options and variations</li>
										<li><i class="icon-check-1"></i> We are here to support you</li>
									</ul>
									<p>Libero cum iusto doloribus officiis delectus alias consectetur ullam, animi totam assumenda, ad earum quis non nostrum placeat provident dolores ratione similique!</p>
									<a href="#" class="btn btn-lg btn-default btn-animated">Purchase <i class="fa fa-cart-arrow-down pl-20"></i></a>
								</div>
							</div>
						</div>
						<!-- main end -->

					</div>
				</div>
			</section>
			<!-- main-container end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="pv-40 light-gray-bg">
				<div class="owl-carousel content-slider">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="testimonial text-center">
									<div class="testimonial-image">
										<img src="images/testimonial-1.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
									</div>
									<h3>Just Perfect!</h3>
									<div class="separator"></div>
									<div class="testimonial-body">
										<blockquote>
											<p>Sed ut perspiciatis unde omnis iste natu error sit voluptatem accusan tium dolore laud antium, totam rem dolor sit amet tristique pulvinar, turpis arcu rutrum nunc, ac laoreet turpis augue a justo.</p>
										</blockquote>
										<div class="testimonial-info-1">- Jane Doe</div>
										<div class="testimonial-info-2">By Company</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="testimonial text-center">
									<div class="testimonial-image">
										<img src="images/testimonial-2.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
									</div>
									<h3>Amazing!</h3>
									<div class="separator"></div>
									<div class="testimonial-body">
										<blockquote>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et cupiditate deleniti ratione in. Expedita nemo, quisquam, fuga adipisci omnis ad mollitia libero culpa nostrum est quia eos esse vel!</p>
										</blockquote>
										<div class="testimonial-info-1">- Jane Doe</div>
										<div class="testimonial-info-2">By Company</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="container">
					<div class="clients-container">
						<div class="clients">
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="100">
								<a href="#"><img src="images/client-1.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="200">
								<a href="#"><img src="images/client-2.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="300">
								<a href="#"><img src="images/client-3.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="400">
								<a href="#"><img src="images/client-4.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="500">
								<a href="#"><img src="images/client-5.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="600">
								<a href="#"><img src="images/client-6.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="700">
								<a href="#"><img src="images/client-7.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="800">
								<a href="#"><img src="images/client-8.png" alt=""></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="pv-40">
				<div class="container">
					<h2 class="text-center">Of Course We Also Provide</h2>
					<div class="separator"></div>
					<div class="row mt-20">
						<div class="col-md-6">
							<div class="feature-box-2 right">
								<span class="icon without-bg"><i class="text-default icon-resize-normal"></i></span>
								<div class="body">
									<h4 class="title">Responsive Design</h4>
									<p>Our design is with responsive in mind. Our themes are compatible with various desktop, tablet, and mobile devices.</p>
									<div class="separator-3"></div>
								</div>
							</div>
							<div class="feature-box-2 right">
								<span class="icon without-bg"><i class="text-default icon-megaphone"></i></span>
								<div class="body">
									<h4 class="title">Easy to Use</h4>
									<p>Our design is with responsive in mind. Our themes are compatible with various desktop, tablet, and mobile devices.</p>
									<div class="separator-3"></div>
								</div>
							</div>
							<div class="feature-box-2 right">
								<span class="icon without-bg"><i class="text-default icon-infinity"></i></span>
								<div class="body">
									<h4 class="title">Unlimited options and variations</h4>
									<p>Our design is with responsive in mind. Our themes are compatible with various desktop, tablet, and mobile devices.</p>
									<div class="separator-3"></div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="feature-box-2">
								<span class="icon without-bg"><i class="text-default icon-snow"></i></span>
								<div class="body">
									<h4 class="title">Latest Technologies</h4>
									<p>Built with latest technologies like HTML5 and CSS3, with best practices and avoiding hacks and workarounds.</p>
									<div class="separator-2"></div>
								</div>
							</div>
							<div class="feature-box-2">
								<span class="icon without-bg"><i class="text-default icon-tools"></i></span>
								<div class="body">
									<h4 class="title">Deticated Support</h4>
									<p>Built with latest technologies like HTML5 and CSS3, with best practices and avoiding hacks and workarounds.</p>
									<div class="separator-2"></div>
								</div>
							</div>
							<div class="feature-box-2">
								<span class="icon without-bg"><i class="text-default icon-star-empty"></i></span>
								<div class="body">
									<h4 class="title">Valid Code</h4>
									<p>Built with latest technologies like HTML5 and CSS3, with best practices and avoiding hacks and workarounds.</p>
									<div class="separator-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- footer start (Add "dark" class to #footer in order to enable dark footer) -->
			<!-- ================ -->
			<footer id="footer" class="clearfix ">

				<!-- .footer start -->
				<!-- ================ -->
				<div class="footer">
					<div class="container">
						<div class="footer-inner">
							<div class="row">
								<div class="col-md-6 col-md-offset-3">
									<div class="footer-content text-center padding-ver-clear">
										<div class="logo-footer"><img id="logo-footer" class="center-block" src="images/logo_light_blue.png" alt=""></div>
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus illo vel dolorum soluta consectetur doloribus sit. Delectus non tenetur odit dicta vitae debitis suscipit doloribus. Lorem ipsum dolor sit amet, illo vel dolorum soluta consectetur.</p>
										<ul class="list-inline mb-20">
											<li><i class="text-default fa fa-map-marker pr-5"></i>One infinity loop, 54100</li>
											<li><a href="tel:+00 1234567890" class="link-dark"><i class="text-default fa fa-phone pl-10 pr-5"></i>+00 1234567890</a></li>
											<li><a href="mailto:info@theproject.com" class="link-dark"><i class="text-default fa fa-envelope-o pl-10 pr-5"></i>info@theproject.com</a></li>
										</ul>
										<a href="#header" class="btn btn-default-transparent btn-lg btn-hvr hvr-sweep-to-top smooth-scroll">Subscribe Now</a>
										<div class="separator"></div>
										<p class="text-center margin-clear">Copyright © 2015 The Project by <a target="_blank" href="http://htmlcoder.me">HtmlCoder</a>. All Rights Reserved</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- .footer end -->

			</footer>
			<!-- footer end -->
			
		</div>
		<!-- page-wrapper end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster -->
		<!-- ================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="plugins/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
		<!-- Modernizr javascript -->
		<script type="text/javascript" src="plugins/modernizr.js"></script>
		<!-- Magnific Popup javascript -->
		<script type="text/javascript" src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
		<!-- Appear javascript -->
		<script type="text/javascript" src="plugins/waypoints/jquery.waypoints.min.js"></script>
		<!-- Count To javascript -->
		<script type="text/javascript" src="plugins/jquery.countTo.js"></script>
		<!-- Parallax javascript -->
		<script src="plugins/jquery.parallax-1.1.3.js"></script>
		<!-- Contact form -->
		<script src="plugins/jquery.validate.js"></script>
		<!-- Owl carousel javascript -->
		<script type="text/javascript" src="plugins/owlcarousel2/owl.carousel.min.js"></script>
		<!-- SmoothScroll javascript -->
		<script type="text/javascript" src="plugins/jquery.browser.js"></script>
		<script type="text/javascript" src="plugins/SmoothScroll.js"></script>
		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="js/template.js"></script>
		<!-- Custom Scripts -->
		<script type="text/javascript" src="js/custom.js"></script>

	</body>
</html>
